<template>
	<view>
		<dsl-navbar title="相册" bgTopImg="white" isBack=""></dsl-navbar>
		<view class="head_image">
			<image src="https://img1.baidu.com/it/u=3934981606,1438413942&fm=26&fmt=auto" mode="aspectFill"
				class="head_image"></image>
			<view class="head_cover">
				<image src="/static/user/modules/imghangguan.png" mode="" class="head_cover_icon"></image>
				<view class="head_cover_title">封面照</view>
			</view>
		</view>
		<view>
			<image src="" mode="" class="upload_image" v-for="(item,index) in photoList"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {
			this.getphotoWallApi({
				pageSize: 99999,
				pageNum: 1
			})
		},
		onShow() {},
		methods: {
			/**
			 * getphotoWallApi 获取相册列表
			 */
			...mapActions('photograph', ['getphotoWallApi'])
		},
		computed: {
			...mapState('photograph', ['photoList'])
		},
		components: {},
	}
</script>

<style lang="scss">
	.head_image {
		width: 750rpx;
		height: 627rpx;
		background-color: #EEEEEE;
		position: relative;
	}

	//封面按钮
	.head_cover {
		width: 189rpx;
		height: 62rpx;
		background: #EAA019;
		opacity: 1;
		border-radius: 0 99rpx 99rpx 0;
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		position: absolute;
		bottom: 0;
		left: 0;


		.head_cover_title {
			font-size: 30rpx;
			padding-left: 10rpx;
		}

		.head_cover_icon {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.upload_image {
		width: 168rpx;
		height: 168rpx;
		background: #FFFFFF;
		border: 2rpx solid #EDEEF3;
		opacity: 1;
		margin-left: 16rpx;
		margin-top: 20rpx;
	}
</style>
